<template>
    <el-container class="lucidity-note-app frosted-glass non-allow-copy" 
        v-loading="loading" 
        element-loading-text="loadText"
        element-loading-svg-view-box="-10, -10, 50, 50"
        element-loading-background="rgba(255, 255, 255, 0.6)">
        <!-- Header Bar -->
        <el-header class="lucidity-note-app-header box-bottom-shadow">
            <lucidity-note-app-header
                :appTransfer="appTransfer">
            </lucidity-note-app-header>
        </el-header>

        <el-container class="lucidity-note-app-box">
            <!-- Aside SideBar -->
            <el-aside class="lucidity-note-app-box-aside">
                <lucidity-note-app-aside
                    @load-overlay="loadOverlay"
                    :appTransfer="appTransfer">
                </lucidity-note-app-aside>
            </el-aside>

            <el-container class="lucidity-note-app-box-ws">
                <!-- Editor Main Area -->
                <el-main class="lucidity-note-app-box-ws-main">
                    <lucidity-note-app-main></lucidity-note-app-main>
                </el-main>

                <!-- Footer Bar Area -->
                <!-- <el-footer class="lucidity-note-app-box-ws-footer">
                    <lucidity-note-app-footer></lucidity-note-app-footer>
                </el-footer> -->
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
    import {ref, reactive, toRefs, onMounted, onBeforeMount} from "vue";

    export default ({
        setup(props, {emit}) {
            const LUCIDITY_NOTE_APP = reactive({
                loading: false,
                loadText: "",
                appTransfer: {},
            });

            const loadOverlay = (params) => {
                LUCIDITY_NOTE_APP.loading = params.loading
                LUCIDITY_NOTE_APP.loadText = params.loadText
            };

            onBeforeMount(() => {
                // 初始化当前组件初始化笔记本信息
                (function() {
                    LucidityNoteApp.Helper.net.get(
                        "/notebook/all",
                        null,
                        (response) => {
                            LUCIDITY_NOTE_APP.appTransfer.notebooks = response.data;
                            LUCIDITY_NOTE_APP.appTransfer.currNotebook = response.data[0];
                        },
                        (err) => {ElementPlus.ElMessage.error(err.message)}
                    );
                })();
            });

            return {
                ...toRefs(LUCIDITY_NOTE_APP),
                loadOverlay
            }
        },



        components: {
            'lucidity-note-app-header': LucidityNoteApp.defineAsyncComponent(LucidityNoteApp.VIEWS.header),
            'lucidity-note-app-aside': LucidityNoteApp.defineAsyncComponent(LucidityNoteApp.VIEWS.aside),
            'lucidity-note-app-main': LucidityNoteApp.defineAsyncComponent(LucidityNoteApp.VIEWS.main),
            // 'lucidity-note-app-footer': LucnoteHelper.defineAsyncComponent(LucidityNoteApp.VIEWS.footer)
        }
    })
</script>

<style scoped>
    .lucidity-note-app {
        width: var(--lucidity-note-full-width);
        height: var(--lucidity-note-full-height);
    }

    .lucidity-note-app-header {
        height: var(--lucidity-note-app-header-height);
        max-height: var(--lucidity-note-app-header-height);
        line-height: var(--lucidity-note-app-header-height);
        width: calc(var(--lucidity-note-full-width) -  1rem);
        background: var(--lucidity-note-app-header-bkcolor);
        border-radius: var(--lucidity-note-app-header-border-radius);
        margin: .5rem .5rem;
    }

    .lucidity-note-app-box {
        margin: 0rem .5rem .5rem .5rem;
        width: calc(var(--lucidity-note-full-width) - 1rem);
        height: calc(var(--lucidity-note-full-height) - var(--lucnote-app-header-height) - .5rem);
        overflow: hidden;
    }

    .lucidity-note-app-box-aside {
        width: var(--lucidity-note-app-aside-width);
        height: var(--lucidity-note-full-height);
        background: var(--lucidity-note-app-aside-bkcolor);
        border-radius: var(--lucidity-note-app-aside-border-radius);
    }

    .lucidity-note-app-box-ws {
        margin-left: .5rem;
        width: calc(var(--lucidity-note-full-width) - .5rem);
        height: var(--lucidity-note-full-height);
        background: var(--lucidity-note-app-box-ws-bkcolor);
    }

    .lucidity-note-app-box-ws-main {
        width: var(--lucidity-note-full-width);
        height: var(--lucidity-note-full-height);
        border-radius: var(--lucidity-note-app-aside-border-radius);
        padding: .5rem;
    }

    /* .lucidity-note-app-box-ws-footer {
        width: var(--lucidity-note-full-width);
        height: var(--lucidity-note-app-footer-height);
        line-height: var(--lucidity-note-app-footer-height);
        margin-top: .5rem;
        background: var(--lucidity-note-app-footer-bkcolor);
        border-radius: var(--lucidity-note-app-footer-border-radius);
    } */
</style>